<template>
  <div style="font-size: 0.35rem">
    <span @click="back"><</span>
    <span>随访计划</span>
    <div>
      <van-tabs
        v-model:active="active"
        type="card"
        class="tabs"
        title-active-color="blue"
      >
        <van-tab title="全部">
          <div class="kk"><a-empty />1</div>
        </van-tab>
        <van-tab title="进行中">
          <div class="kk"><a-empty />2</div>
        </van-tab>
        <van-tab title="已完成">
          <div class="kk"><a-empty />3</div>
        </van-tab>
        <van-tab title="已中止">
          <div class="kk"><a-empty />4</div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const back = () => {
  router.go(-1)
}
</script>

<style scoped>
.tabs {
  margin-top: 0.3rem;
  width: 100%;
  height: 100%;
}
.tabs >>> .van-tab__text--ellipsis {
  width: 20% !important;
  height: 0.4rem;
  line-height: 0.4rem;
  float: left;
  text-align: center;
  font-size: 0.35rem !important;
  margin-left: 0.25rem;
}
.tabs >>> .van-tab__text--ellipsis:focus {
  background: skyblue !important;
  color: white !important;
}
.kk {
  padding-top: 2rem !important;
  width: 100%;
  height: 100%;
}
</style>
